<template>
    <div class="page detail">
        <nav-bar title="账单详情" @click-left="$router.back()"></nav-bar>
        <div class="con gshadow2">
            <div class="header">
                <div class="icon gshadow2"></div>
                <div class="label">上海喜士多便利连锁有限公司</div>
            </div>
            <divider />
            <div class="list">
                <van-row class="line">
                    <van-col span="6" class="title">当前状态</van-col>
                    <van-col span="18" class="desc">支付成功</van-col>
                </van-row>
                <van-row class="line">
                    <van-col span="6" class="title">商品</van-col>
                    <van-col span="18" class="desc">这是支付看电视的思考和</van-col>
                </van-row>
                <van-row class="line">
                    <van-col span="6" class="title">商户全称</van-col>
                    <van-col span="18" class="desc">上海喜士多便利连锁有限公司</van-col>
                </van-row>
                <van-row class="line">
                    <van-col span="6" class="title">支付时间</van-col>
                    <van-col span="18" class="desc">2011:21:22</van-col>
                </van-row>
                <van-row class="line">
                    <van-col span="6" class="title">支付方式</van-col>
                    <van-col span="18" class="desc">支付</van-col>
                </van-row>
                <van-row class="line">
                    <van-col span="6" class="title">交易单号</van-col>
                    <van-col span="18" class="desc">28382732137219073</van-col>
                </van-row>
                <van-row class="line">
                    <van-col span="6" class="title">商户单号</van-col>
                    <van-col span="18" class="desc">297239329183219</van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { Divider } from 'vant';

export default {

    components: { Divider },

    data() {
        return {
            show: false,
        }
    },

    methods: {

    },

    computed: {
        ...mapState({
            userRole: state => state.userRole,
        })
    },

};
</script>

<style lang="scss" scoped>
.detail {
    width: 100%;
    padding: 10px;
    .con {
        padding: 0 20px;
        background-color: #ffffff;
        .header {
            padding: 20px 0;
            & > div {
                margin: auto;
            }
            .icon {
                width: 60px;
                height: 60px;
                border-radius: 30px;
                background-color: aquamarine;
            }
            .label {
                font-size: 16px;
                padding-top: 20px;
                text-align: center;
            }
        }
        .list {
            padding: 20px 0;
            font-size: 14px;
            .line {
                margin: 10px;
                .title {
                    color: #666;
                }
                .desc {
                    color: #333;
                }
            }
        }
    }
}
</style>
